<template>
  <div class="base-sub-title">
    <div class="base-sub-title-top">{{ title }}</div>
    <div class="base-sub-text">{{ valueRef }}</div>
  </div>
</template>
<script setup lang="ts">
  import { ref, watch } from 'vue';

  const props = defineProps({
    value: [String, Number],
    title: '',
    element: [],
  });
  const valueRef = ref(props.value);
  watch(
    () => props.value,
    (v) => {
      valueRef.value = v;
    },
  );
</script>
<style lang="less" scoped>
  .base-sub-title {
    //height: 100px;
    //background-color: #ffffff;
    //margin:  10px;
    overflow: hidden;
    //border: 1px solid #E1E1E1;
    border-radius: 4px;

    .base-sub-title-top {
      padding: 4px 0;
      overflow: hidden;
      border-bottom: 1px solid rgb(225 225 225 / 26.1%);
      color: rgb(0 0 0 / 85%);
      font-size: 14px;
      // font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .base-sub-text {
      padding: 3px 0;
      overflow: hidden;
      color: rgb(0 0 0 / 85%);
      font-size: 14px;
      // font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .activeMultiple {
    background: linear-gradient(90deg, #4c9bef 0%, #0b79ee 100%);
    color: #fff !important;

    .base-sub-title-top {
      color: #fff !important;
    }

    .base-sub-text {
      color: #fff;
    }
  }
</style>
